<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  data() {
    return {
      map: null,
      points: [
        { lnglat: [116.405285, 39.904989], city: 'Beijing', district: 'Chaoyang', street: 'Wangjing' },
        { lnglat: [116.406285, 39.905989], city: 'Beijing', district: 'Chaoyang', street: 'Wangjing' },
        { lnglat: [116.407285, 39.906989], city: 'Beijing', district: 'Haidian', street: 'Zhongguancun' },
        { lnglat: [116.408285, 39.907989], city: 'Beijing', district: 'Haidian', street: 'Shangdi' },
        { lnglat: [121.473701, 31.230416], city: 'Shanghai', district: 'Pudong', street: 'Lujiazui' },
        { lnglat: [121.474701, 31.231416], city: 'Shanghai', district: 'Pudong', street: 'Lujiazui' },
        { lnglat: [121.475701, 31.232416], city: 'Shanghai', district: 'Jingan', street: 'Nanjing Road' },
        { lnglat: [121.476701, 31.233416], city: 'Shanghai', district: 'Jingan', street: 'Xintiandi' },
        { lnglat: [114.305393, 30.593099], city: 'Wuhan', district: 'Jianghan', street: 'Hankou' },
        { lnglat: [114.306393, 30.594099], city: 'Wuhan', district: 'Jianghan', street: 'Hankou' },
        { lnglat: [114.307393, 30.595099], city: 'Wuhan', district: 'Wuchang', street: 'Guanggu' },
        { lnglat: [114.308393, 30.596099], city: 'Wuhan', district: 'Wuchang', street: 'Guanggu' },
        { lnglat: [113.264385, 23.129112], city: 'Guangzhou', district: 'Tianhe', street: 'Zhujiang New Town' },
        { lnglat: [113.265385, 23.130112], city: 'Guangzhou', district: 'Tianhe', street: 'Zhujiang New Town' },
        { lnglat: [113.266385, 23.131112], city: 'Guangzhou', district: 'Yuexiu', street: 'Beijing Road' },
        { lnglat: [113.267385, 23.132112], city: 'Guangzhou', district: 'Yuexiu', street: 'Beijing Road' },
      ],
      cluster: null,
      district: {
        Beijing: { center: '116.405285,39.904989' },
        Shanghai: { center: '121.473701,31.230416' },
        Wuhan: { center: '114.305393,30.593099' },
        Guangzhou: { center: '113.264385,23.129112' },
        Chaoyang: { center: '116.450000,39.920000' },
        Haidian: { center: '116.310000,39.950000' },
        Pudong: { center: '121.550000,31.220000' },
        Jingan: { center: '121.460000,31.230000' },
        Jianghan: { center: '114.270000,30.580000' },
        Wuchang: { center: '114.340000,30.540000' },
        Tianhe: { center: '113.330000,23.140000' },
        Yuexiu: { center: '113.270000,23.130000' },
        Wangjing: { center: '116.470000,39.990000' },
        Zhongguancun: { center: '116.310000,39.980000' },
        Shangdi: { center: '116.320000,40.020000' },
        Lujiazui: { center: '121.550000,31.240000' },
        NanjingRoad: { center: '121.480000,31.230000' },
        Xintiandi: { center: '121.480000,31.220000' },
        Hankou: { center: '114.270000,30.600000' },
        Guanggu: { center: '114.400000,30.510000' },
        ZhujiangNewTown: { center: '113.330000,23.140000' },
        BeijingRoad: { center: '113.270000,23.130000' },
      },
      clusterIndexSet: {
        city: { minZoom: 2, maxZoom: 10 },
        district: { minZoom: 10, maxZoom: 12 },
        area: { minZoom: 12, maxZoom: 15 },
        community: { minZoom: 15, maxZoom: 22 },
      },
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "f8c954755588cd09132500151dc4d01c", // 申请好的Web端开发者Key
        version: "2.0", // 指定要加载的 JSAPI 的版本
        plugins: ["AMap.Scale", "AMap.ControlBar", "AMap.IndexCluster"], // 需要使用的插件列表
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D", // 是否为3D地图模式
            zoom: 4, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
            mapStyle: "amap://styles/blue", // 使用高德提供的地图样式
          });

          // 添加比例尺
          this.map.addControl(new AMap.Scale());

          // 添加控制条
          this.map.addControl(
            new AMap.ControlBar({
              showZoomBar: true, // 是否显示缩放按钮
              showControlButton: fa, // 是否显示倾斜、旋转按钮
              position: {
                right: "10px",
                top: "10px",
              },
            })
          );

          // 初始化聚合
          this.cluster = new AMap.IndexCluster(this.map, this.points, {
            renderClusterMarker: this.renderClusterMarker,
            clusterIndexSet: this.clusterIndexSet,
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    renderClusterMarker(context) {
      const styleObj = this.getStyle(context);
      const div = document.createElement("div");
      div.className = "amap-cluster";
      div.style.backgroundColor = styleObj.bgColor;
      div.style.width = styleObj.size + "px";
      div.style.height = styleObj.size + "px"; // Added height to match the width

      if (styleObj.index <= 2) {
        div.style.height = styleObj.size + "px";
        context.marker.on("click", (e) => {
          let curZoom = this.map.getZoom();
          if (curZoom < 20) {
            curZoom += 1;
          }
          this.map.setZoomAndCenter(curZoom, e.lnglat);
        });
      }

      div.style.border = `solid 1px ${styleObj.borderColor}`;
      div.style.borderRadius = `${styleObj.size / 2}px`; // Updated to make it a circle
      div.innerHTML = styleObj.text;
      div.style.color = styleObj.color;
      div.style.textAlign = styleObj.textAlign;
      div.style.boxShadow = styleObj.boxShadow;
      context.marker.setContent(div);

      const position = this.getPosition(context);
      if (position) {
        context.marker.setPosition(position);
      }
      context.marker.setAnchor("center");
    },
    getStyle(context) {
      const { clusterData, index, count } = context;
      const color = ["8,60,156", "66,130,198", "107,174,214", "78,200,211"];
      const indexs = ["city", "district", "area", "community"];
      const i = indexs.indexOf(index.mainKey);
      let text = clusterData[0][index.mainKey];
      let size = Math.round(30 + Math.pow(count / this.points.length, 1 / 5) * 70);

      if (i <= 2) {
        const extra = `<span class="showCount">${context.count}个</span>`;
        text = `<span class="showName">${text}</span>` + extra;
      } else {
        size = 12 * text.length + 20;
      }

      return {
        bgColor: `rgba(${color[i]},.8)`,
        borderColor: `rgba(${color[i]},1)`,
        text,
        size,
        index: i,
        color: "#ffffff",
        textAlign: "center",
        boxShadow: "0px 0px 5px rgba(0,0,0,0.8)",
      };
    },
    getPosition(context) {
      const key = context.index.mainKey;
      const dataItem = context.clusterData && context.clusterData[0];
      const districtName = dataItem[key];
      if (!this.district[districtName]) {
        return null;
      }
      const center = this.district[districtName].center.split(",");
      return new AMap.LngLat(center[0], center[1]);
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 120%;
}
.amap-cluster {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.showName {
  font-size: 14px;
}
.showCount,
.showName {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 80%;
}
</style>
